<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
    <title>跟进记录</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
      <input name="wdkhid" hidden/>

    <div class="layui-row">
        <div class="layui-col-md6">
            <label class="layui-form-label">联系人</label>
            <div class="layui-input-block">
                <input type="lxr" name="lxr" placeholder="请输入联系人" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md6">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="lxr" name="phone" placeholder="请输入联系人" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-md6">
            <label class="layui-form-label">常用语</label>
            <div class="layui-input-block">
                <select name="cyy" lay-filter="aihao">
                    <option value="">请选择常用语</option>
                    <option value="未接">未接</option>
                    <option value="在忙">在忙</option>
                    <option value="秒挂">秒挂</option>
                    <option value="不需要">不需要</option>
                    <option value="其他">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md6">
            <label class="layui-form-label">跟进情况</label>
            <div class="layui-input-block">
                <textarea type="gjqk" name="gjqk" placeholder="请输入跟进情况" autocomplete="off" class="layui-input"></textarea>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-md6">
            <label class="layui-form-label">下次联系时间</label>
            <div class="layui-input-block">
                <input type="datetime-local" name="xclxtime" placeholder="请输入下次联系时间（年月日时分秒）" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md6">
            <label class="layui-form-label">意向度</label>
            <div class="layui-input-block">
                <select id="kujbSCF" name="khjb">
                    <option value="">请选择意向度</option>
                </select>
            </div>
        </div>
    </div>

  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  hidden>
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="key" class="layui-input"  autocomplete="off" placeholder="请输入">
      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <!--        <button class="layui-btn"   id="export">导出全部</button>-->
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
<!--    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="tGjjl:add">添加</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tGjjl:delete">删除</button>-->
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script th:inline="javascript"> var wdkhIdVo =[[${wdkhId}]]  </script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var currPage = 1;//首先默认值为1，防止出错
  info();
  layui.use(['table', 'layer', 'laydate'], function () {
    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/tGjjl/listByPage' //数据接口
      , where:{
            wdkhid :wdkhIdVo
        }
        ,done: function(res, curr, count){
            //如果是异步请求数据方式，res即为你接口返回的信息。
            /**
             *如果是直接赋值的方式，
             *res即为：{data: [], count: 99}
             *data为当前页数据、count为数据总长度
             */
            console.log(res);
            currPage = curr;//将当前页码赋值给全局变量currPage
            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
        }
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
            {field: 'xs', title: '销售', width: 120, sort: true, align: "center"},
            {field: 'khjb', title: '意向度', width: 120, sort: true, align: "center"},
            {field: 'whtime', title: '呼叫时间', width: 180, sort: true, align: "center"},
            {field: 'addtime', title: '记录时间', width: 180, sort: true, align: "center"},
            {field: 'xclxtime', title: '下次联系时间', width: 180, sort: true, align: "center"},
            {field: 'gjqk', title: '跟进情况', width: 420, sort: true, align: "center"},
          // {width: 120, toolbar: "#tool", title: '操作'}
        ]
      ]
      , toolbar: '#toolbar'
    });


    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("新增");
          $(".operation input[name=id]").val("");
          $(".operation input[name=khjb]").val("");
          $(".operation input[name=lxr]").val("");
          $(".operation input[name=lxfs]").val("");
          $(".operation input[name=xclxtime]").val("");
          $(".operation input[name=cyy]").val("");
          $(".operation input[name=gjqk]").val("");
          $(".operation input[name=wdkhid]").val("");
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'edit':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("编辑");
            //给表单赋值
            form.val("infoeidt", {
                id: data.id,
                khjb: data.khjb,
                lxr: data.lxr,
                lxfs: data.lxfs,
                xclxtime: data.xclxtime,
                cyy: data.cyy,
                gjqk: data.gjqk,
                wdkhid: data.wdkhid,
            })
          break;
      }
    });

    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost("/tGjjl/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/tGjjl/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/tGjjl/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/tGjjl/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });

  function info() {
      CoreUtil.sendGet("/tWdkh/infoData/", null, function (res) {
          var code = res.code;
          var data = res.data;
          //username、 khlySC 请选择客户来源、请选择意向度、请选择所属销售;
          if (code == 0) {
              //username
              var username = $("#username");
              $.each(data.username, function (index, item) {
                  if (!!item) {
                      username.append("<option value=" + item + ">" + item + "</option>");
                  }
              });
              //客户来源
              var khlySC = $("#khlySC");
              var khlySCF = $("#khlySCF");
              var khlySCFeidt = $("#khlySCFeidt");
              $.each(data.khly, function (index, item) {
                  khlySC.append("<option value=" + item + ">" + item + "</option>");
                  khlySCF.append("<option value=" + item + ">" + item + "</option>");
                  khlySCFeidt.append("<option value=" + item + ">" + item + "</option>");
              });
              //意向度
              var kujbSC = $("#kujbSC");
              var kujbSCF = $("#kujbSCF");
              var kujbSCFeidt = $("#kujbSCFeidt");
              $.each(data.hkjb, function (index, item) {
                  if (!!item) {
                      kujbSC.append("<option value=" + item.id + ">" + item.value + "</option>");
                      kujbSCF.append("<option value=" + item.id + ">" + item.value + "</option>");
                      kujbSCFeidt.append("<option value=" + item.id + ">" + item.value + "</option>");
                  }
              });
              //所属销售
              var ssxsSC = $("#ssxsSC");
              $.each(data.ssxs, function (index, item) {
                  if (!!item) {
                      ssxsSC.append("<option value=" + item + ">" + item + "</option>");
                  }
              });
              form.render("select");
          }
      });
      CoreUtil.sendGet("/sys/home/", null, function (res) {
          userInfo = res.data.userInfo;
          userRoles = res.data.sysRole;
          userDepts = res.data.dept;
          userSysUsers = res.data.users;
          if (userInfo.sysRoleName == '员工') {
              var ssxsSCid = document.getElementById("ssxsSCid");
              ssxsSCid.style.display = "none";
              var deptSCid = document.getElementById("deptSCid");
              deptSCid.style.display = "none";

          }
          //加载表格
          tableIns();
      });
  };

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: currPage //重新从第 1 页开始
      }
    });
  };
</script>